import styles from "./index.less"
import * as echarts from "echarts"
import mapJSon from "@/unitl/map.json"
import {useEffect, useRef} from "react"
const Map = () => {
    const city = {}
    mapJSon.features.forEach(item => {
        city[item.properties.name] = item.properties.center
    })
    const chart = useRef()
    const data = [
        {name: '万州区', value: 1000},
        {name: '涪陵区', value: 0},
        {name: '渝中区', value: 0},
        {name: '大渡口区', value: 0},
        {name: '江北区', value: 0},
        {name: '沙坪坝区', value: 0},
        {name: '九龙坡区', value: 0},
        {name: '南岸区', value: 0},
        {name: '北碚区', value: 0},
        {name: '綦江区', value: 0},
        {name: '大足区', value: 0},
        {name: '渝北区', value: 0},
        {name: '巴南区', value: 0},
        {name: '黔江区', value: 0},
        {name: '长寿区', value: 0},
        {name: '江津区', value: 0},
        {name: '合川区', value: 0},
        {name: '永川区', value: 0},
        {name: '南川区', value: 0},
        {name: '璧山区', value: 0},
        {name: '铜梁区', value: 0},
        {name: '潼南区', value: 0},
        {name: '荣昌区', value: 0},
        {name: '开州区', value: 0},
        {name: '梁平区', value: 0},
        {name: '武隆区', value: 0},
        {name: '城口县', value: 0},
        {name: '丰都县', value: 0},
        {name: '垫江县', value: 0},
        {name: '忠县', value: 0},
        {name: '云阳县', value: 0},
        {name: '奉节县', value: 0},
        {name: '巫山县', value: 0},
        {name: '巫溪县', value: 0},
        {name: '石柱土家族自治县', value: 0},
        {name: '秀山土家族苗族自治县', value: 0},
        {name: '酉阳土家族苗族自治县', value: 0},
        {name: '彭水苗族土家族自治县', value: 0}
    ]

    const convertData = function (data) {
        console.log(data, "haha")
        const res = [];
        for (var i = 0; i < data.length; i++) {
            const geoCoord = city[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }

        return res;
    };

    const series = [
        {
            type: 'map',
            map: 'map',
            width:"100%",
            heigth:'100%',
            aspectScale: 0.75,
            //zoom:1.1,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            itemStyle: {
                normal: {
                    borderColor:'transparent',
                    areaColor: {
                        // borderWidth: 1,
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(147, 235, 248, 0.1)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(147, 235, 248, 1)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: true, // 缺省为 false
                    },
                    shadowColor: "rgba(128, 217, 248, 0.1)",
                    shadowOffsetX: -2,
                    shadowOffsetY: 12,
                    shadowBlur: 10,
                }
            },
            data: data,
        },
        {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        rippleEffect: {
            period: 4,
            scale: 4,
            brushType: 'stroke'
        },
        emphasis: {
            label: {
                show: true
            }
        },
        label: {
            show: true,
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                fontSize: "10px",
                color: "#FFFFFF"
            },
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            color: '#73F7F9',
        }
    }]
    data.forEach(item=>{
        series.push({
            type: 'lines',
            data: [{
                fromName: '秀山土家族苗族自治县',
                toName: '上海',
                coords: [
                    [108.996043, 28.444772],
                    city[item.name]
                ]
            }],
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 0.2, //尾迹线条透明度
                    curveness: .3, //尾迹线条曲直度
                    color:'rgba(115, 248, 250, 0.9)'
                }
            },
        })
    })
    echarts.registerMap('map', mapJSon);
    useEffect(() => {
        const myChart = echarts.init(chart.current);
        let option
        option = {
            // 背景颜色
            backgroundColor: "transparent",
            tooltip: {
                show: true,
                trigger: "item",
                alwaysShowContent: false,
                backgroundColor: "#0C121C",
                borderColor: "rgba(0, 0, 0, 0.16);",
                hideDelay: 100,
                triggerOn: "mousemove",
                enterable: true,
                textStyle: {
                    color: "#DADADA",
                    fontSize: "12",
                    width: 20,
                    height: 30,
                    overflow: "break",
                },
                showDelay: 100
            },

            // 地图配置
            geo: {
                width:"100%",
                heigth:'100%',
                map: 'map',
                show: true,
                roam: false,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                layoutSize: "100%",
                itemStyle: {
                    normal: {
                        areaColor: "transparent",
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00F6FF'
                        }, {
                            offset: 1,
                            color: '#53D9FF'
                        }], false),
                        borderWidth: 2,
                        shadowColor: 'rgba(10,76,139,1)',
                        shadowOffsetY: 0,
                        shadowBlur: 1
                    }
                }

            },
            series: series
        }
        // echarts.registerMap('map', mapJSon);
        option && myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize()
        })
    }, [])
    return (
        <div className={styles.container}>
            <div ref={chart} className={styles.map}></div>
        </div>
    )
}
export default Map